<div class="main-content">
	<!-- #section:basics/content.breadcrumbs -->
	<div class="breadcrumbs" id="breadcrumbs">
		<script type="text/javascript">
			try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
		</script>

		<ul class="breadcrumb"><li>
			<i class="ace-icon fa fa-th-large th-large-icon"></i> cms管理 <i class="ace-icon fa fa-angle-double-right"></i> 焦点图管理 
		</li></ul><!-- /.breadcrumb -->
	</div>

	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- #section:settings.box -->
		<div class="ace-settings-container" id="ace-settings-container" style="margin-top:-48px;">
			<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
				<i class="ace-icon fa fa-cog bigger-150"></i>
			</div>
			<div class="ace-settings-box clearfix" id="ace-settings-box">
				<div class="pull-left width-50">
					<!-- #section:settings.skins -->
					<div class="ace-settings-item">
						<div class="pull-left">
							<select id="skin-colorpicker" class="hide">
								<option data-skin="no-skin" value="#438EB9" <?=!isset($_COOKIE['ace_skin'])||$_COOKIE['ace_skin']!='no-skin'?'selected':''?> >#438EB9</option>
								<option data-skin="skin-1" value="#222A2D" <?=isset($_COOKIE['ace_skin'])&&$_COOKIE['ace_skin']=='skin-1'?'selected':''?> >#222A2D</option>
								<option data-skin="skin-2" value="#C6487E" <?=isset($_COOKIE['ace_skin'])&&$_COOKIE['ace_skin']=='skin-2'?'selected':''?> >#C6487E</option>
								<option data-skin="skin-3" value="#D0D0D0" <?=isset($_COOKIE['ace_skin'])&&$_COOKIE['ace_skin']=='skin-3'?'selected':''?> >#D0D0D0</option>
							</select>
						</div>
						<span>&nbsp;肤色切换</span>
					</div>

					<!-- /section:settings.skins -->

					<!-- #section:settings.navbar -->
					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
						<label class="lbl" for="ace-settings-navbar">&nbsp; 固定导航</label>
					</div>

					<!-- /section:settings.navbar -->

					<!-- #section:settings.sidebar -->
					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
						<label class="lbl" for="ace-settings-sidebar">&nbsp; 固定菜单栏</label>
					</div>
					<!-- /section:settings.sidebar -->
					
					<!-- #section:settings.container -->
					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
						<label class="lbl" for="ace-settings-add-container">&nbsp; 宽窄屏切换</label>
					</div>
					<!-- /section:settings.container -->
				</div><!-- /.pull-left -->

				<div class="pull-left width-50">
					<!-- #section:basics/sidebar.options -->
					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
						<label class="lbl" for="ace-settings-hover">&nbsp; 内级栏目切换</label>
					</div>

					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
						<label class="lbl" for="ace-settings-compact">&nbsp; 菜单栏切换</label>
					</div>

					<div class="ace-settings-item">
						<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
						<label class="lbl" for="ace-settings-highlight">&nbsp; 当前菜单凸显</label>
					</div>
					<!-- /section:basics/sidebar.options -->
				</div><!-- /.pull-left -->
			</div><!-- /.ace-settings-box -->
		</div><!-- /.ace-settings-container -->

		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12">
					<form class="form-horizontal" role="form" action="" method="get">
						<div class="form-group col-sm-10 col-xs-10">
							<input type="text" name="keywords" value="<?=$keywords?>" placeholder="关键字:多个用‘英文逗号’隔开" class="col-xs-8 col-sm-5" data-rel="tooltip" title="关键字:多个用‘英文逗号’隔开">
							&nbsp;<button class="btn btn-info btn-sm" data-rel="tooltip" title="搜索"><i class="ace-icon fa fa-search"></i><span class="hidden-480">search</span></button>
						</div>
					</form>
					<button class="btn btn-info btn-sm pull-right" onclick="addAccount()" data-rel="tooltip" title="添加焦点图"><i class="ace-icon fa fa-plus"></i><span class="hidden-480">添加焦点图</span></button>
					<div class="table-responsive">
						<table class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>标题</th>
									<th>图片链接地址</th>
									<th>图片路径</th>
									<th>缩略图</th>
									<th>状态</th>
									<th>操作时间</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
								<?
								if($re){
									foreach($re as $k=>$v){?>
										<tr>
											<td><?=$v['title']?></td>
											<td><?=$v['url']?></td>
											<td><?=$v['src']?></td>
											<td><img src="<?=$v['src']?>" onclick="window.open('<?=$v['src']?>')" style="width:100px;height:50px;cursor:pointer;" /></td>
											<td><?=$v['status']==1?'<font class="badge badge-success">正常</font>':'<font class="badge badge-danger">禁用</font>'?></td>
											<td><?=$v['created']?></td>
											<td>
												<div class="action-buttons">
													<a class="green" href="javascript:;" onclick="upAccount('<?=$v['id']?>','<?=$v['title']?>','<?=$v['url']?>','<?=$v['src']?>','<?=$v['status']?>')" data-rel="tooltip" title="修改"><i class="ace-icon fa fa-pencil bigger-130"></i></a>
													<a class="red" href="javascript:;" onclick="delAccount('<?=$v['id']?>')" data-rel="tooltip" title="删除"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>
												</div>
											</td>
										</tr>
									<?}
								}
								?>
							</tbody>
						</table>
					</div>
					<?=$pageHtml?>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content-area -->
	</div><!-- /.page-content -->
</div><!-- /.main-content -->
<!-- inline scripts related to this page -->

<div class="bootbox modal fade bootbox-prompt in" tabindex="-1" role="dialog" aria-hidden="false" id="accountForm" style="position:absolute;display:block;left:100%;">
	<style>
		#upload{
			width: 100%;height: 150px;float: left;border:1px solid #ddd;position: relative;margin:10px auto;
			background: url("/public/home/img/to/upload.png") no-repeat center;
		}
		#data_avator{width: 100%;position: absolute;top:0px;left: 0px;background: none;opacity: 0;filter:alpha(opacity=0)}
		#upload img{width: 100%;height: 150px;display: block;position: absolute;top:0px;left: 0px;}
		#upload .close{
			width: 30px;height: 30px;background: url("/public/home/img/to/default.png") -33px 0 no-repeat;
			display: inline-block;position: absolute;right: 0px;top:0px;z-index: 1;
		}
	</style>
	<script src="/public/assets/upload/jquery.uploadify.min.js"></script>
	<div style="background-color: #303030;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;position: fixed;width: 100%;height: 100%;"></div>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" onclick="animateColse('#accountForm')">×</button>
				<h4 class="modal-title"></h4>
			</div>
			<form class="bootbox-form">
				<div class="modal-body">
					<div class="bootbox-body">
						<input class="form-control" type="text" name="title" placeholder="标题（必须）" data-rel="tooltip" title="标题（必须）">
						<input type="hidden" name="src">
						<div id="upload">
							<input type="file" id="data_avator" class="file" style="width:100%;height:150px;" />
							<img src="" class="show_img" style="display:none;"/>
							<a href="javascript:;" title="删除" data-rel="tooltip" class="close"></a>
						</div>
						<input class="form-control" type="text" name="url" placeholder="链接地址（非必须）" data-rel="tooltip" title="链接地址（非必须）" style="margin-top:10px;">
						<label style="margin-top:10px;"><input name="status" type="radio" value="1" class="ace"><span class="lbl"> 正常</span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label style="margin-top:10px;"><input name="status" type="radio" value="2" class="ace" checked><span class="lbl"> 禁用</span></label>
						<input type="hidden" name="kid">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="animateColse('#accountForm')">取消</button>
					<button type="button" class="btn btn-primary">提交</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
function addAccount(){
	$('#accountForm').animate({left:'0'});$('#accountForm input[type="text"],#accountForm input[type="hidden"]').val('');
	$('#accountForm img.show_img').attr('src','').hide();$('#accountForm input[type="radio"]:eq(1)').prop('checked',true);
	$('#accountForm input[name="kid"]').val(0);$('#accountForm h4.modal-title').html('添加焦点图');
}
function upAccount(kid,title,url,src,status){
	$('#accountForm').animate({left:'0'});$('#accountForm input[name="title"]').val(title);$('#accountForm input[name="url"]').val(url);
	$('#accountForm img.show_img').attr('src',src).show();$('#accountForm input[name="kid"]').val(kid);$('#accountForm h4.modal-title').html('修改焦点图');
	if(status==1){$('#accountForm input[name="status"]:eq(0)').prop('checked',true);}else{$('#accountForm input[name="status"]:eq(1)').prop('checked',true);}
}
$('#accountForm .btn-primary').click(function(){
	$.ajax({
		type:'POST',
		url:'<?=$this->url("cms/upPicture")?>',
		data:$('#accountForm form').serialize(),
		dataType:'json',
		success:function(r){
			if(r.state==1){
				gritter("gritter-success gritter-light",3000,"操作提示",r.html);
				setTimeout('window.location.reload()',2000);
			}else{
				gritter("gritter-error gritter-light",3000,"操作提示",r.html);
			}
		},
		error:function(){
			gritter("gritter-error gritter-light",3000,"操作提示","网络错误！请联系我方工作人员。");
		}
	});
});
function delAccount(kid){
	if(confirm("确认删除？删除后将不可恢复！")){
		$.ajax({
			type:'POST',
			url:'<?=$this->url("cms/delPicture")?>',
			data:'kid='+kid,
			dataType:'json',
			success:function(r){
				if(r.state==1){
					gritter("gritter-success gritter-light",3000,"操作提示",r.html);
					setTimeout('window.location.reload()',3000);
				}else{
					gritter("gritter-error gritter-light",3000,"操作提示",r.html);
				}
			},
			error:function(){
				gritter("gritter-error gritter-light",3000,"操作提示","网络错误！请联系我方工作人员。");
			}
		});
	}
}
$("#upload .close,#accountForm form .modal-footer .btn-default").click(function(){
	$.ajax({
		type:'POST',
		url:'<?=$this->url("cms/urlSet")?>',
		data:'url='+$('input[name="src"]').val(),
		dataType:'json',
		success:function(r){}
	});
	$('#upload .show_img').attr('src','').hide();
	$('input[name="src"]').val('');
});
$('#upload .file').uploadify({
	'formData'     : {
		'timestamp' : '<?=time()?>',
		'token'     : '<?=md5('unique_salt' . time())?>'
	},
	'swf': '/public/assets/upload/uploadify.swf',
	'fileType': 'image/*',
	'fileObjName':'pic',
	'height':'150',
	'width':'100%',
	'left': '0',
	'queueID':'up_queue',
	'buttonClass':'uploadSwf1',
	'uploader' : '/upload.php?tle=0',
	'onUploadSuccess' : function(file, data, response) {
		data= eval('(' + data + ')');
		if(data.state==1){
			$("#upload .show_img").attr('src',data.logo);
			$("input[name='src']").val(data.logo);
			$('#upload .show_img').show();
		}else{
			gritter("gritter-error gritter-light",3000,"操作提示",data.html);
		}
	}
});
</script>